nav #navSettings {
  position: absolute;
  margin-left: 450px;
  margin-top: 50px;
  width: 300px;
  height: 500px;
  background-color: #CF272F;
  z-index: 1000;
  border-radius: 15px;
  transition: opacity 0.5s ease;
  opacity: 0;
  display: none; /* Das Element ist anfangs nicht sichtbar */
}




nav #navSettings.visible {
display: block;
opacity: 1;
}


#navSettings #settingsInside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;

}



#navSettings #settingsInside .switch-container {}








/*
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
*/





nav #navSettingsBtn {
  color: #F3DA65;
  position: absolute;
  margin-left: 675px;
  margin-top: -22px;
}


nav #navSettingsBtn .fa-solid {
  font-size: 30px;
  transition: .3s;
}


nav #navSettingsBtn .fa-solid:hover {
  transform: rotate(90deg);
}


nav #navSettingsBtn .fa-solid:active {
  transform: rotate(180deg);
  transform: scale(1.2);
  transform: .1s;
}








@media screen and (max-width: 1600px) {

  nav #navSettingsBtn {
    color: #F3DA65;
    position: absolute;
    margin-left: 575px;
    margin-top: -22px;
  }


  nav #navSettings {
    position: absolute;
    margin-left: 320px;
    margin-top: 50px;
    width: 300px;
    height: 500px;
    background-color: #CF272F;
    z-index: 1000;
    border-radius: 15px;

    transition: opacity 0.5s ease;
    opacity: 0;
    display: none; /* Das Element ist anfangs nicht sichtbar */
  }
}



  @media screen and (max-width: 1280px) {

    nav #navSettingsBtn {
      color: #F3DA65;
      position: absolute;
      margin-left: 545px;
      margin-top: -22px;
    }



    nav #navSettings {
      position: absolute;
      margin-left: 280px;
      margin-top: 50px;
      width: 300px;
      height: 500px;
      background-color: #CF272F;
      z-index: 1000;
      border-radius: 15px;
      transition: opacity 0.5s ease;
      opacity: 0;
      display: none; /* Das Element ist anfangs nicht sichtbar */
    }

  }





  @media (max-width: 1235px) {

    nav #navSettingsBtn {
      color: #F3DA65;
      position: absolute;
      margin-left: 110px;
      margin-top: 10px;
    }


    nav #navSettings {
      position: absolute;
      margin-left: 0px;
      margin-top: 50px;
      width: 250px;
      height: 200px;
      background-color: #CF272F;
      z-index: 1000;
      border-radius: 15px;

      transition: opacity 0.5s ease;
      opacity: 0;
      display: none; /* Das Element ist anfangs nicht sichtbar */
    }

  }



  /* Buttons */

/** ALlgemeiner Style für alle Buttons **/

.switch-container {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }



  .switch {
      display: none;
  }



  .switch-label {
      display: block;
      width: 50px;
      height: 26px;
      border-radius: 15px;
      position: absolute;
      cursor: pointer;
      transition: background-color 0.3s;

  }





  .switch-label::after {
      content: '';
      display: inline;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      position: absolute;
      top: 1px;
      left: 1px;
      transition: transform 0.3s;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;


  }


  /** Below are the button specific styles **/


  /* #001 Dark Mode **/

  #darkMode {}


  #darkMode .switch-label {
    background-color: #000;
    background-color: #B0E2FF;
  }

  #darkMode .switch-label::after {
    background-color: #FFFF00;
    background-image: url("../img/settingIcons/darkModeIcons/shinyMode.png");
    }

  #darkMode .switch:checked + .switch-label {
      background-color: magenta;
  }

  #darkMode .switch:checked + .switch-label::after {
    background-color: #000;
    transform: translateX(24px);
    background-image: url("../img/settingIcons/darkModeIcons/darkMode.png");
  }



  /*

  @media screen and (max-width: 1600px) {


    .switch-label {

        width: 40px;
        height: 20.8px;
        border-radius: 15px;
        margin-left: -0px;
        top: 3px;
    }

    .switch-label::after {
        width: 19.2px;
        height: 19.2px;
        border-radius: 50%;
        top: 1px;
        left: 1px;
    }


  }








      @media (max-width: 1235px) {
        .switch-label {

            width: 50px;
            height: 26px;
            border-radius: 15px;
            margin-left: 150px;
            top: 10px;
        }

        .switch-label::after {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            top: 1px;
            left: 1px;
        }

      }




*/



/* #002 Nav Mode **/



#navMode {}


#navMode .switch-label {
  background-color: #FFF;
}


#navMode .switch-label::after {
  background-color: #000;
  background-image: url("../img/settingIcons/navIcons/navDown.png");
}



#navModeSwitch:checked + .switch-label {
  background-color: #000;
}

/* Stil für das ::after-Pseudo-Element des Labels anpassen, wenn Checkbox angehakt */
#navModeSwitch:checked + .switch-label::after {
  background-color: #FFF;
  transform: translateX(24px);
  background-image: url("../img/settingIcons/navIcons/navUp.png");
}


/*
.switchTwo {
    display: none;
}



.switch-labelTwo {
    display: inline;
    /*background-color: #2196F3;*/ /*
    background-color: #000;
    width: 50px;
    height: 26px;
    border-radius: 15px;
    position: absolute;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: -0px;
    top: 7px;
    background-color: #FFF;
}

.switch-labelTwo::after {
    content: '';
    display: inline;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
    background-color: #000;
  background-image: url("../../img/navDown.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.switchTwo:checked + .switch-labelTwo {
    /*background-color: #4CAF50;*/ /*
    background-color: #000;
}

.switchTwo:checked + .switch-labelTwo::after {
  background-color: #FFF;
  transform: translateX(24px);
  background-image: url("../../img/navUp.png");
}






@media screen and (max-width: 1600px) {


  .switch-labelTwo {

      width: 40px;
      height: 20.8px;
      border-radius: 15px;
      margin-left: -0px;
      top: 3px;
  }

  .switch-labelTwo::after {
      width: 19.2px;
      height: 19.2px;
      border-radius: 50%;
      top: 1px;
      left: 1px;
  }


}



    @media (max-width: 1235px) {
      .switch-labelTwo {

          width: 50px;
          height: 26px;
          border-radius: 15px;
          margin-left: 150px;
          top: 10px;
      }

      .switch-labelTwo::after {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          top: 1px;
          left: 1px;
      }

    }


*/





/* #003 Zoom Mode **/





 #zoomMode {}



 #zoomMode .switch-label {
   background-color: #F0F8FF;
   background-color: #B0E2FF;
 }


 #zoomMode .switch-label::after {
   background-color: #FFFF00;
   background-image: url("../img/settingIcons/zoomIcons/zoomOff.png");
 }


 #zoomModeSwitch:checked + .switch-label {
     background-color: magenta;
 }

 #zoomModeSwitch:checked + .switch-label::after {
   background-color: #000;
     transform: translateX(24px);
 background-image: url("../img/settingIcons/zoomIcons/zoomOn.png");
 }



/*
.switch-label-Three {
    display: inline;
    /*background-color: #2196F3;*//*
    background-color: #000;
    width: 50px;
    height: 26px;
    border-radius: 15px;
    position: absolute;
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: #F0F8FF;
    background-color: #B0E2FF;
}

.switch-label-Three::after {
    content: '';
    display: inline;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
    background-color: #FFFF00;
	background-image: url("../../img/zoomIcons/zoomOff.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.switchThree:checked + .switch-label-Three {
    /*background-color: #4CAF50;*/ /*
    background-color: magenta;
}

.switchThree:checked + .switch-label-Three::after {
  background-color: #000;
    transform: translateX(24px);
background-image: url("../../img/zoomIcons/zoomOn.png");
}




*/



/* #004 Read Mode **/

#readMode {}



#readMode .switch-label {
  background-color: #F0F8FF;
  background-color: #B0E2FF;
}


#readMode .switch-label::after {
  background-color: #FFFF00;
  background-image: url("../img/settingIcons/soundIcons/soundOff.png");
}


#soundModeSwitch:checked + .switch-label {
    background-color: magenta;
}

#soundModeSwitch:checked + .switch-label::after {
  background-color: #000;
    transform: translateX(24px);
background-image: url("../img/settingIcons/soundIcons/soundOn.png");
}



/* #005 language Mode */





.language-dropdown {
    cursor: pointer;
}

/*
*/
.flag {
    width: 40px;
    height: 26.6px;
    display: block; /* Flaggen untereinander anzeigen */
    margin: 0 auto;
    padding-top: 20px;
}



.hidden {
    display: none!important;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 5px;
}


#other-languages {
  position: absolute;
  background-color: orange;
  padding: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  margin-left: -5px;
}


#other-languages .flag {
  padding: 16px;
}


.dropdown-arrow {
    cursor: pointer;
    display: inline-block;
    margin-right: 0px;
    user-select: none;
}

.language-dropdown:hover .dropdown-arrow {
    color: #000; /* Optional: Farbe ändern, wenn man über das Dropdown fährt */
}



@media screen and (max-width: 1600px) {

  .language-dropdown {
      cursor: pointer;
  }

*/
  .flag {
      width: 35px;
      height: 23.3px;
      display: block; /* Flaggen untereinander anzeigen */
  }


  .dropdown-arrow {
      cursor: pointer;
      display: inline-block;
      margin-right: 0px;
      user-select: none;
  }

}




@media screen and (max-width: 1280px) {
  .language-dropdown {
      cursor: pointer;
  }
  .dropdown-arrow {
      cursor: pointer;
      display: inline-block;
      margin-right: 0px;
      user-select: none;
  }

}




  @media (max-width: 1235px) {


    .language-dropdown {
        cursor: pointer;
    }




    .flag {
        width: 35px;
        height: 23.3px;
        display: block; /* Flaggen untereinander anzeigen */
    }

    .dropdown-arrow {
        cursor: pointer;
        display: inline-block;
        margin-right: 0px;
        user-select: none;
    }

    #other-languages {
      position: absolute;
      display: flex;
      padding: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      border-radius: 5px;
      margin-left: -78.6px;
    }

  }



  @media (max-width: 600px) {

    .language-dropdown {
        cursor: pointer;
    }


    .flag {
        width: 35px;
        height: 23.3px;
        display: block; /* Flaggen untereinander anzeigen */
    }

    .dropdown-arrow {
        cursor: pointer;
        display: inline-block;
        margin-right: 0px;
        user-select: none;
    }

  }
















/*
    <input type="checkbox" id="modeSwitch" class="switch">
    <label for="modeSwitch" class="switch-label"></label>
</a>
<a class="switch-container-two">
    <input type="checkbox" id="NavModeSwitch" class="switchTwo">
    <label for="NavModeSwitch" class="switch-labelTwo"></label>
</a>

<a class="switch-container-three">
    <input type="checkbox" id="ZoomModeSwitch" class="switchThree">
    <label for="ZoomModeSwitch" class="switch-label-Three"></label>
</a>




<div id="language-dropdown" class="language-dropdown">
<img src="http://tinyurl.com/28j2nf94" alt="Deutsch" id="current-flag" class="flag">
<span id="dropdown-arrow" class="dropdown-arrow">&#9662;</span> <!-- Pfeil hinzugefügt -->
<div id="other-languages" class="hidden">
<img src="http://tinyurl.com/28j2nf94" alt="Deutsch" class="flag">
<img src="http://tinyurl.com/26ffjzqd" alt="English" class="flag">
<!--<img src="http://tinyurl.com/2a7rpbma" alt="Français" class="flag">-->
<!--<img src="https://astrix.one/bilder/newFlag.webp" alt="madeLang" class="flag">-->
<img src="assets/img/koelnFlagge.png" alt="Kölsch" class="flag">

</div>
</div>


<a class="switch-container-four">
<button id="musicToggle"><i class="fa-solid fa-volume-high"></i></button>
<!-- <input type="checkbox" id="SoundSwitch" class="switchThree">-->
 <label for="SoundSwitch" class="switch-labelThree"></label>
</a>
*/